<script lang="ts">
  import { locale, switchLanguage } from '../lib/i18n';
  import { t } from '../lib/i18n';

  // 支持的语言列表
  const languages = [
    { code: 'zh-CN', name: $t('language.zh-CN') },
    { code: 'zh-TW', name: $t('language.zh-TW') },
    { code: 'en', name: $t('language.en') }
  ];
  
  // 处理语言切换
  function handleLanguageChange(event: Event) {
    const select = event.target as HTMLSelectElement;
    switchLanguage(select.value);
  }
</script>

<div class="language-selector">
  <label for="language-select">{$t('language.title')}:</label>
  <select 
    id="language-select" 
    value={$locale} 
    on:change={handleLanguageChange}
  >
    {#each languages as lang}
      <option value={lang.code}>{lang.name}</option>
    {/each}
  </select>
</div>

<style>
  .language-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem;
  }
  
  label {
    font-size: 0.9rem;
    color: #333;
  }
  
  select {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    border: 1px solid #ccc;
    background: white;
    font-size: 0.9rem;
    cursor: pointer;
  }
  
  select:hover {
    border-color: #999;
  }
  
  select:focus {
    outline: none;
    border-color: #4d90fe;
    box-shadow: 0 0 0 2px rgba(77, 144, 254, 0.2);
  }
</style> 
